@extends('admin.master')

@section('style')
    <link rel="stylesheet" href="{{ url('js/lightbox/css/lightbox.css') }}">
@endsection

@section('top')
<div class="top-breadcrumb pull-left">{!! Breadcrumbs::render() !!}</div>
@endsection

@section('content')
	<div id="contract-show">
	    <table class="table mt0">
	        <thead>
	            <tr>
	                <th>合同号</th>
	                <th>客户名称</th>
	                <th>发票类型</th>
	                <th>合同图片</th>
	                <th>发票回执</th>
	                <th>发票状态</th>
	                <th>回执状态</th>
	                <th>备注</th>
	            </tr>
	        </thead>
	        <tbody>
	            <td><code class="text-size-16">{{ $data->contract_no }}</code></td>
	            <td>{{ $data->customer->name }}</td>
	             <td>{{ config('system.invoice_type')[$data->invoice_type] }}</td>
	            <td>
	                <ul class="contract-imgs">
	                    <li v-for="item in contractImgs">
	                        <a href="@{{ item.src }}" class="thumbnail" data-lightbox="contracts">
	                            @{{{ item.img }}}
	                        </a>
	                    </li>
	                </ul>
	            </td>
	            <td>
	                <ul class="contract-imgs">
	                    <li v-for="item in receiptImgs">
	                        <a href="@{{ item.src }}" class="thumbnail" data-lightbox="receipts">
	                            @{{{ item.img }}}
	                        </a>
	                    </li>
	                </ul>
	            </td>
	            <td>
	                @if($data->invoice_status == 1)
	                    <span class="label label-success">发票已开</span>
	                @endif
	            </td>
	            <td>
	                @if($data->invoice_receipt_status == 1)
	                    <span class="label label-success">回执已收</span>
	                @endif
	            </td>
	            <td>{{ $data->remark }}</td>
	        </tbody>
	    </table>
    </div>
@endsection

@section('foot')
<script src="{{ url('js/lightbox/js/lightbox.min.js') }}"></script>
<script>
     lightbox.option({'resizeDuration': 200,'fadeDuration': 100})

	// 合同和回执图片
	var contract = {!! $data ?: '{}' !!};

	vm  = new Vue({
	    el: '#contract-show',
	    data: {
	        contract: contract
	    },
	    computed: {
	        contractImgs: function() {
	            var items = this.contract.contract.split('-');
	            return items.map(function(item, index) {
	                return {
	                    src: HOME_URL + '/' + item,
	                    img: '<img src="' + HOME_URL + '/' + item + '">'
	                };
	            });
	        },
	        receiptImgs: function() {
	            var items = this.contract.invoice_receipt.split('-');
	            return items.map(function(item, index) {
	                return {
	                    src: HOME_URL + '/' + item,
	                    img: '<img src="' + HOME_URL + '/' + item + '">'
	                };
	            });
	        }
	    }
	})
</script>
@endsection